/**
 * Created by 邵敬超 on 2017/9/21.
 * 缓动函数
 */

import $ from 'jquery'

// console.log($)
class Sparkle {
  constructor ($parent, options) {
    this.options = options
    this.init($parent)
  }
  init ($parent) {
    let _this = this
    this.$canvas = $('<canvas>').addClass('sparkle-canvas').css({
      position: 'absolute',
      top: '-' + _this.options.overlap + 'px',
      left: '-' + _this.options.overlap + 'px',
      'pointer-events': 'none'
    }).appendTo($parent)
    this.canvas = this.$canvas[0]
    this.context = this.canvas.getContext('2d')
    console.log(this.context)
    this.sprite = new Image()
    this.sprites = [0, 6, 13, 20]
    this.sprite.src = this.datauri
    this.canvas.width = this.options.width + (this.options.overlap * 2)
    this.canvas.height = this.options.height + (this.options.overlap * 2)
    this.particles = this.createSparkles(this.canvas.width, this.canvas.height)
    this.anim = null
    this.fade = false
  }
  createSparkles (w, h) {
    let holder = []
    for (let i = 0; i < this.options.count; i++) {
      let color = this.options.color
      if (this.options.color === 'rainbow') {
        color = '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6)
      } else if ($.type(this.options.color) === 'array') {
        color = this.options.color[Math.floor(Math.random() * this.options.color.length)]
      }
      holder[i] = {
        position: {
          x: Math.floor(Math.random() * w),
          y: Math.floor(Math.random() * h)
        },
        style: this.sprites[Math.floor(Math.random() * 4)],
        delta: {
          x: Math.floor(Math.random() * 1000) - 500,
          y: Math.floor(Math.random() * 1000) - 500
        },
        size: parseFloat((Math.random() * 2).toFixed(2)),
        color: color
      }
    }
    return holder
  }
  draw (time, fade) {
    console.log(this.context, this.options)
    let ctx = this.context
    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    for (let i = 0; i < this.options.count; i++) {
      let derpicle = this.particles[i]
      let modulus = Math.floor(Math.random() * 7)
      if (Math.floor(time) % modulus === 0) {
        derpicle.style = this.sprites[Math.floor(Math.random() * 4)]
      }
      ctx.save()
      ctx.globalAlpha = derpicle.opacity
      console.log('dssd', ctx.drawImage)
      ctx.drawImage(this.sprite, derpicle.style, 0, 7, 7, derpicle.position.x, derpicle.position.y, 7, 7)
      if (this.options.color) {
        ctx.globalCompositeOperation = 'source-atop'
        ctx.globalAlpha = 0.5
        ctx.fillStyle = derpicle.color
        ctx.fillRect(derpicle.position.x, derpicle.position.y, 7, 7)
      }
      ctx.restore()
    }
  }
  update () {
    let _this = this
    this.anim = window.requestAnimationFrame((time) => {
      for (let i = 0; i < _this.options.count; i++) {
        let u = _this.particles[i]
        let randX = (Math.random() > Math.random() * 2)
        let randY = (Math.random() > Math.random() * 3)
        if (randX) {
          u.position.x += ((u.delta.x * _this.options.speed) / 1500)
        }
        if (!randY) {
          u.position.y -= ((u.delta.y * _this.options.speed) / 800)
        }
        if (u.position.x > _this.canvas.width) {
          u.position.x = -7
        } else if (u.position.x < -7) {
          u.position.x = _this.canvas.width
        }
        if (u.position.y > _this.canvas.height) {
          u.position.y = -7
          u.position.x = Math.floor(Math.random() * _this.canvas.width)
        } else if (u.position.y < -7) {
          u.position.y = _this.canvas.height
          u.position.x = Math.floor(Math.random() * _this.canvas.width)
        }
        if (_this.fade) {
          u.opacity -= 0.02
        } else {
          u.opacity -= 0.005
        }
        if (u.opacity <= 0) {
          u.opacity = (_this.fade) ? 0 : 1
        }
      }
      _this.draw(time)
      if (_this.fade) {
        _this.fadeCount -= 1
        if (_this.fadeCount < 0) {
          window.cancelAnimationFrame(_this.anim)
        } else {
          _this.update()
        }
      } else {
        _this.update()
      }
    })
  }
  cancel () {
    this.fadeCount = 100
  }
  over () {
    window.cancelAnimationFrame(this.anim)
    for (let i = 0; i < this.options.count; i++) {
      this.particles[i].opacity = Math.random()
    }
    this.fade = false
    this.update()
  }
  out () {
    this.fade = true
    this.cancel()
  }
}
Sparkle.datauri = ''

$.fn.sparkleh = function (options) {
  console.log(this)
  return this.each((k, v) => {
    let $this = $(v).css('position', 'relative')
    let settings = $.extend({
      width: $this.outerWidth(),
      height: $this.outerHeight(),
      color: '#FFFFFF',
      count: 30,
      overlap: 0,
      speed: 1
    }, options)
    let sparkle = new Sparkle($this, settings)
    console.log('sparkle', sparkle)
    $this.on({
      'mouseover': (e) => {
        sparkle.over()
      },
      'mouseout': (e) => {
        sparkle.out()
      }
    })
  })
}

export default Sparkle
